<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器加载</title>
</head>
<body>
    <h1>浏览器加载</h1>

    <!-- 传统方式加载脚本 -->
    <script src="path/to/myModule.js"></script>

    <!-- 加载ES6模块 -->
    <script type="module" src="./foo.js"></script>

    <!-- 内联模块代码 -->
    <script type="module">
        import { foo } from './foo.js';
        console.log(foo);
    </script>

    <!-- defer属性示例 -->
    <script type="module" defer src="./deferred.js"></script>

    <!-- async属性示例 -->
    <script type="module" async src="./async.js"></script>

    <script type="module">
        // 模块特性示例
        
        // 1. 严格模式
        // 'use strict' 是默认的
        console.log(this === undefined); // true

        // 2. 独立的作用域
        const x = 1;
        console.log(window.x); // undefined

        // 3. 模块只执行一次
        import './only-once.js';
        import './only-once.js'; // 不会重复执行

        // 4. 支持import.meta
        console.log(import.meta.url);

        // 实际应用示例
        // 动态加载模块
        const userLanguage = navigator.language;
        
        async function loadLanguageModule() {
            const module = await import(`./lang/${userLanguage}.js`);
            return module.default;
        }

        // 条件加载
        if (process.env.NODE_ENV === 'development') {
            import('./dev.js').then(module => {
                module.enableDebugMode();
            });
        }

        // 按需加载
        document.getElementById('loadButton').addEventListener('click', () => {
            import('./heavy-module.js')
                .then(module => {
                    module.initialize();
                })
                .catch(err => {
                    console.error('模块加载失败:', err);
                });
        });
    </script>

    <!-- 兼容性处理 -->
    <script nomodule src="fallback.js"></script>
</body>
</html> 